<template>
  <div class="dashboard_container">
    <Header />
    <div class="dashboard_content" :style="getContentStyle">
      <!-- 菜单 -->
      <Menu class="dashboard_menu" :style="getMenuStyle" />
      <div class="dashboard_main">
        <!-- 历史导航 -->
        <tabBar />
        <!-- 主内容 -->
        <div class="app_main" v-loading="routerStore.$state.refreshPage">
          <!-- 只对当前打开的页面进行缓存 -->
          <router-view
            v-slot="{ Component }"
            v-if="
              !routerStore.$state.refreshPage &&
              routerStore.$state.tabBarList
                .map((i) => i.menuUrl.split('?')[0])
                .includes($route.path)
            "
          >
            <transition name="el-zoom-in-left">
              <keep-alive>
                <component :is="Component" :key="route.path + routerStore.$state.pageName" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useUserStore } from '@/stores/modeles/user'
import { useVisionStore } from '@/stores/modeles/vision'
import { useRoute } from 'vue-router'
import { useRouterStore } from '@/stores/modeles/router'
import Header from './header.vue'
import Menu from './menu.vue'
import tabBar from './tabBar.vue'

const route = useRoute()
const userStore = useUserStore()
const visionStore = useVisionStore()
const routerStore = useRouterStore()
const isExpend = ref(false) //菜单是否折叠
const isCross = ref(false) //菜单是否横向

const breadList = computed(() => {
  const data = routerStore.$state.menuListNotree.find((i) => {
    return i.menuUrl == route.path
  })
  return data ? data.path.map((i) => i.menuName) : []
})

//主视觉布局
const getContentStyle = computed(() => {
  return {
    flexDirection: isCross.value ? 'column' : 'row',
  }
})

// 菜单样式
const getMenuStyle = computed(() => {
  return {
    width: isCross.value ? '100%' : isExpend.value ? '64px' : '200px',
    height: isCross.value ? '50px' : '100%',
  }
})

watch(
  () => visionStore.$state.isExpend,
  (val) => {
    isExpend.value = val
  }
)
watch(
  () => visionStore.$state.isCross,
  (val) => {
    isCross.value = val
  }
)

//获取用户信息
const getUserInfo = () => {
  userStore.getInfo().then((res) => {})
}

onMounted(() => {
  isExpend.value = visionStore.$state.isExpend
  isCross.value = visionStore.$state.isCross
  getUserInfo()
})
</script>
  
  <style scoped lang="scss">
.dashboard_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--sys-sebg-color);

  .dashboard_content {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;

    .dashboard_menu {
      width: 200px;
      height: 100%;
      transition: all 0.3s;
    }

    .dashboard_main {
      flex: 1;
      padding: 0 16px 16px 16px;
      transition: all 0.3s;

      .app_main {
        width: 100%;
        height: calc(100% - 56px);
        background-color: var(--sys-bg-color);
        transition: all 0.3s;
        padding: 16px;
        overflow-y: auto;
      }
    }
  }
}
</style>